<script setup lang="ts">
import { reactive, watch } from 'vue';
import { RouteMatch } from '../../services/client';
import NtmMultipleValuesEditor from './NtmMultipleValuesEditor.vue';
import NtmRouteQueryParametersEditor from './NtmRouteQueryParametersEditor.vue';
import NtmRouteHeadersEditor from './NtmRouteHeadersEditor.vue';
import { HttpMethods } from '../../constants/RouteConfigConstants'

const model = defineModel<RouteMatch>({ required: true })

const modelValue = reactive(model);
watch(modelValue, (value) => {
    model.value = value;
})


</script>

<template>
    <ElFormItem prop="methods" label="Methods">
        <ElSelect v-model="modelValue.methods">
            <ElOption v-for="(method) in HttpMethods" :key="method" :label="method" :value="method"></ElOption>
        </ElSelect>
    </ElFormItem>
    <ElFormItem prop="hosts" label="Hosts">
        <NtmMultipleValuesEditor v-model="modelValue.hosts"></NtmMultipleValuesEditor>
    </ElFormItem>
    <ElFormItem prop="path" label="Path">
        <ElInput v-model="modelValue.path"></ElInput>
    </ElFormItem>
    <ElFormItem prop="queryParameters" label="Query Parameters">
        <NtmRouteQueryParametersEditor v-model="modelValue.queryParameters"></NtmRouteQueryParametersEditor>
    </ElFormItem>
    <ElFormItem prop="headers" label="Headers">
        <NtmRouteHeadersEditor v-model="modelValue.headers"></NtmRouteHeadersEditor>
    </ElFormItem>
</template>